<script setup>

import {useUserStore} from "@/stores/userStores.js";
import { useStudentStores } from "@/stores/studentStores.js";
import {ref, onMounted, watch} from "vue";
import * as echarts from "echarts";
import {storeToRefs} from "pinia";
const { baseInfo } = storeToRefs(useUserStore());
const { scores } = storeToRefs(useStudentStores())
const gradeGraphChart = ref(null) // 成绩分布图表
let gradeGraphInstance = null
function initGradeGraphChart() {
  gradeGraphInstance = echarts.init(gradeGraphChart.value)

  gradeGraphInstance.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['个人分数', '班级平均分'],
      type: 'plain',
      left: 'center',
      textStyle: {
        color: '#333'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: scores.value.map(item => item.courseName),
      axisLabel: {
        rotate: 45,
        interval: 0,
        fontSize: 11
      }
    },
    yAxis: {
      type: 'value',
      name: '分数',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: '{value} 分'
      }
    },
    series: [
      {
        name: '课程个人分数',
        type: 'bar', // 使用柱状图显示个人分数更直观
        data: scores.value.map(item => item.score),
        itemStyle: {
          color: '#409EFF', // 蓝色表示个人分数
          borderRadius: [4, 4, 0, 0]
        },
        barWidth: '40%'
      },
      {
        name: '课程班级平均分',
        type: 'line',
        data: scores.value.map(item => item.score),
        itemStyle: {
          color: '#E6A23C' // 橙色表示班级平均分
        },
        lineStyle: {
          width: 2,
          type: 'solid'
        },
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: true
      }
    ]
  });
}
function getTime(){
  const today = new Date();
  const h = today.getHours()
  if (h < 11) {
    return "上午好"
  }else if (h < 14) {
    return "中午好"
  }else if (h < 19) {
    return "下午好"
  }else {
    return "晚上好"
  }

}
onMounted(() => {
})
</script>

<template>
  <el-row :gutter="20">
    <!-- 欢迎卡片 -->
    <el-col :span="24">
      <el-card class="welcome-card">
        <template #header>
          <div class="welcome-header">

            <div class="welcome-info">
              <h2>{{ getTime() }}，{{ baseInfo.name }}</h2>
<!--              <p>{{ currentDate }}</p>-->
            </div>
          </div>
        </template>
        <div class="welcome-stats">
          <el-row :gutter="20">

          </el-row>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1f2937;
}
.chart-container {
  padding: 10px;
}
</style>